import _ from 'lodash'
import {ref, computed, watch, onMounted, onUnmounted, nextTick, getCurrentInstance} from 'vue';
import { useRouter, useRoute } from 'vue-router';

import ELE_TYPES_Fn from '../ele/ele-types.js';
import { useWatchLater } from './useWatchLater.js'
import { useDesignStore } from '../../store/design.js'
import { useItemOps } from './useItemOps';
import {useCommonStore} from "@jzl/stores";
import {api} from "@jzl/api";
import {$jutils, $bus, $themeUtils, $utils, $pageUtils} from '@jzl/utils'
import { useVars } from "@jzl/comps";
import {_dragClone, _getAlias, clearDefaultStyle} from '../../utils/mutil.js'

export function useBuilder(props, emit) {
  const router = useRouter();
  const route = useRoute();
  const watchLater = useWatchLater();

  const instance = getCurrentInstance();
  // ========== Shared State ==========
  // const projectId = ref(null);
  const designPageId = ref(null);
  const iAppId = ref(null);
  const loading = ref(false);
  const ready = ref(false);

  const currentItem = ref({});
  const currentIndex = ref(-1);
  const currentItemElCode = ref('');
  const hoverItemElCode = ref('');
  const pageAddShow = ref(false);
  const pageForm = ref({ name: '' });
  const activePageIndex = ref(-1);
  const items = ref([]);
  const pages = ref([]);
  const currentPage = ref({});

  const showMainNav = ref(false);
  const commonPage = ref({});
  const navItem = ref({});
  const isEditNav = ref(false);
  const isMainNavPage = ref(false);

  const elemNodes = ref([]);
  const maskPos = ref({});
  const isRouterEnter = ref(false);
  // const isH5 = ref(true);
  const currentItems = ref([]);

  // 左侧节点树的当前节点信息，currentNode.def 为 currentEleData
  const currentNode = ref(null)

  const pinMenu = ref(true);
  const pinProp = ref(true);
  const dataset = ref({
    state: {},
    items: {},
    loading: {}
  });

  /*const lowcode = ref({
    lifecyclel: null,
    lifecycled: null,
    tablerenders: null,
    handlers: null,
    handlerx: [],
    buildret: {}
  });*/

  const compPanelName = ref("选择云组件");
  const compPanelShow = ref(false);
  // const pageWidth = ref(1200);

  const _r = ref(null)

  // ========== Store Mapping ==========
  // ========== Computed ==========
  const isShowTitleProp = computed(() => _.get(currentItem.value, 'tpl.header.show') === 'custom');
  const isCurrentFirst = computed(() => {
    const itemCode = _.get(currentItem.value, 'page_item_code');
    if (!itemCode) return false;
    const index = _.findIndex(currentItems.value, { page_item_code: itemCode });
    return index === 0;
  });

  const isCurrentLast = computed(() => {
    const itemCode = _.get(currentItem.value, 'page_item_code');
    if (!itemCode || !currentItems.value.length) return false;
    const index = _.findIndex(currentItems.value, { page_item_code: itemCode });
    return index === (currentItems.value.length - 1);
  });

  const isEditPage = computed(() => currentPage.value === currentItem.value);
  const pageTheme = computed(() => _.get(currentPage.value, "style.setting.theme") || "");
  const pageStyle = computed(() => $pageUtils.getStyle(currentPage.value, "style"));
  const pageType = computed(() => currentPage.value?.type || props.inPageType || 2)
  const isH5 = computed(() => pageType.value === 2 || pageType.value === '2')
  const className = computed(() => {
    if($pageUtils.isPageTypePc(currentPage.value)) {
      return "page-builder-pc"
    } else if($pageUtils.isPageTypeH5(currentPage.value)) {
      return "page-builder-h5"
    } else if($pageUtils.isPageTypeBs(currentPage.value)) {
      return "page-builder-bs"
    }
    return "page-builder-h5"
  });
  const project = computed(() => useCommonStore()?.project );
  const loginUser = computed(() => useCommonStore()?.loginUser );
  const projectId = computed(() => {
    return route.query.projectId || project.value?.project_id;
  })
  const dyncComps = computed(() => {
    return useDesignStore().dyncComps
  })

  const actions = computed(() => {
    return currentPage.value?.actions || [];
  })

  const actionsTop = computed(() => {
    return _.filter(actions.value, a => a.action_type === 1 || a.action_type === 11)
  })

  const actionsBottom = computed(() => {
    return _.filter(actions.value, a => a.action_type === 2 || a.action_type === 12)
  })

  const {
    // getVarDefs,
    initPageVars,
    // loadVarData,
  } = useVars({
    item: currentItem.value,
    page: currentPage.value,
    vars: dataset.value.state
  }, {
    dataset,
  }, emit)

  const {
    isEditItem,
    hoverItemCode,

    handleSelectItem,
    getIndex,
    moveUp,
    moveDown,
    copy,
    handleItemEnter,
    handleItemLeave
  } = useItemOps({
    currentItem,
    currentItems,
    elemNodes,
    currentItemElCode,
    projectId
  });

  // ========== Watchers ==========
  watch(
    () => [ props.inPageId, props.pageId ],
    (val) => {
      if (val) init();
    }
  );

  watch(
    () => route.value,
    () => init()
  );

  watch(() => items.value, (newVal, oldVal) => {
    let isChange = false;

    if(newVal?.length !== oldVal?.length) {
      isChange = true;
    }

    if(isChange) {
      initElemNodes();

      let diffEle = null;
      if(newVal.length > oldVal.length) { // 新增
        let differs = _.difference(newVal, oldVal);
        diffEle = _.get(differs, '[0]');
      } else {    // 删除
        diffEle = _.get(newVal, '[0]');
      }

      if(diffEle) {
        handleSelectItem({
          items: items.value,
          item: diffEle,
          isSelectItem: true
        });
      }
    }
  }, { deep: true })

  watch(
    () => activePageIndex.value,
    (val) => {
      if (val >= 0) {
        isMainNavPage.value = _checkIsMainNavPage();
      } else {
        isMainNavPage.value = false;
      }
    }
  );

  watch(
    () => currentItem.value?.page_item_code,
    () => {
      refreshEleNode();
      initDefConfig();
    }
  );

  watch(
    () => currentItemElCode.value,
    (code) => {
      const cNode = $utils.getTreeData(elemNodes.value, 'code', code)
      // const currentEleData = _.get(curNode, 'def')
      // state.currentEleData = currentEleData || {}
      currentNode.value = cNode
    }
  )

  /*watch(() => hoverItemElCode.value, () => {
    if(hoverItemElCode.value === currentItem.value?.ele_style?._code) {
      currentItemElCode.value = hoverItemElCode.value
    }
  })*/

  // ========== Lifecycle ==========
  onMounted(async () => {
    await init();

    $bus.on('design:changeElemNodes', initElemNodes)
    $bus.on('design:hoverEleCode', handleHoverElenode)
  })

  onUnmounted(() => {
    $bus.off('design:changeElemNodes');
    $bus.off('design:hoverEleCode');
  })

  // ========== Internal Methods ==========
  const init = async () => {
    let pageId = route.query.id;
    let appId = route.query.appId;

    designPageId.value = props.pageId || props.inPageId || pageId;
    iAppId.value = props.appId || appId;

    reset();
    await _refresh(true);

    await $jutils.Page.loadJs(currentPage.value, $jutils.PAGE_TYPE.DETAIL);
    await initPageVars(currentPage.value);
    initElemNodes();

    currentItems.value = items.value;
    // await initLowcode();

    _r.value = $jutils.Page.getPageItemRender(currentPage.value);

    await nextTick(() => {
      watchLater(() => currentPage.value?.vars, () => {
        initPageVars(currentPage.value)
      }, { deep: true });
      ready.value = true;
      emit("ready",currentPage.value);
      handlePageResize();
    });
  }

  const handleItemStateChange = (data) => {
    let item = data?.item;
    let state = data?.state;
    let alias = item?.alias;
    let code = alias || item?.page_item_code;

    // this.$set(this.dataset, `items.${ code }`, state);
    dataset.value.items[ code ] = state;
  }

  const _parse = async (page) => {
    let pageType = page?.type;
    let ELE_TYPES = ELE_TYPES_Fn();

    if(pageType === 2) {   // h5
      ELE_TYPES = ELE_TYPES_Fn('H5');
    }

    if(page?.items) {
      for(let i = 0; i < page?.items?.length; i++) {
        let it = page.items[ i ];

        it.i = it.page_item_code;
        // it.box_style = this.$putils.getInitMixStyle(it.box_style);
        // it.ele_style = this.$putils.getInitMixStyle(it.ele_style);

        if(it.is_dynccomp === 1) {
          if(it.comp_lib && it.component) {
            let key = `${ it.comp_lib }-${ it.component }`;
            let compInfo = dyncComps.value[ key ];
            let def = compInfo?.comp_def;

            if(!def) {
              compInfo = await api.comp.getCompByName(it.component, it.comp_lib);
              def = _.get(compInfo, "comp_def");
              // this.dyncComps[ key ] = def;
              useDesignStore().setDyncComps(compInfo);
            }
            if(def) {
              let newItem = _.defaultsDeep(it, _.cloneDeep(def));
              _.assignIn(it, newItem);
            }
          }
        } else {    // 默认值
          if(!it.subs || !_.isArray(it.subs)) it.subs = [];
        }
      }
    }

    return page;
  }

  const reset = () => {
    currentItem.value = {};
    currentIndex.value = -1;
    currentItemElCode.value = '';
    // propTab.value = 'style';
    // this.propTabActive = 0;
    activePageIndex.value = -1;
    // this.showMainNav = false;
    // this.isEditNav = false;
    isMainNavPage.value = false;
    elemNodes.value = [];
  }

  const _refresh = async (isInit = false) => {
    loading.value = true;

    let page = {};

    if(designPageId.value) {   // 修改
      page = await api.page.getPage(designPageId.value);
    } else {
      page = {
        page_name: '页面' + $utils.getNanoid(6),    // this.pageForm.name,
        // page_desc: this.pageForm.name,
        page_code: $utils.getNanoid(10),
        project_id: projectId.value,
        type: pageType.value || 2,
        items: [],
        isModify: true,
        grid_cols: 12,
        style: { setting: { theme: "", space: 20 }, _ss: {} }
      };
    }

    currentPage.value = await _parse(page);
    items.value = currentPage.value?.items || [];

    loading.value = false;
  }

  const addItem = (item, index) => {

    item.form_item_code = $utils.getNanoid(10);  // uuidv4().replace(/-/g, '');

    if(item.options?.length) {
      for(let i = 0; i < item.options.length; i++) {
        item.options[i].fio_code = $utils.getNanoid(10);     // uuidv4().replace(/-/g, '');
      }
    }

    if(index === -1) {
      items.value.unshift(item);
    } else {
      items.value.splice(index + 1, 0, item);
    }
  }

  const bindItem2Page = () => {
    currentPage.value.items = items.value;
  }

  const submit = async (autoSubmit = false) => {

    bindItem2Page();

    let pitClone = _.cloneDeep(currentPage.value);

    let idx = 1;
    let items = _.map(pitClone.items, (it) => {
      let itClone = _.cloneDeep(it);

      // 清理默认项目
      itClone.order = idx++;
      itClone.ele_style = clearDefaultStyle(itClone.ele_style);
      itClone.box_style = clearDefaultStyle(itClone.box_style);
      // console.log(it.ele_style, itClone.ele_style);
      return itClone;
    });

    pitClone.project_id = projectId.value;
    pitClone.items = items;

    // 新增
    if(!pitClone.page_id && iAppId.value) {
      pitClone.app_id = iAppId.value;
    }

    let ret = await api.page.pageUpsert(pitClone);

    if(ret) {
      let pageId = _.get(ret, 'page_id');
      if(!autoSubmit) {
        $jui.toast('操作成功！', 'success');
      }

      if(pageId && !designPageId.value) {    // 新增
        designPageId.value = pageId;
        await _refresh();
      }
    }
  }

  function _checkIsMainNavPage() {
    if (activePageIndex.value >= 0 && pages.value.length) {
      const page = pages.value[activePageIndex.value];
      const mainNavList = _.get(navItem.value, "module_data1");

      if (page?.page_code && mainNavList?.length) {
        for (let i = 0; i < mainNavList.length; i++) {
          const it = mainNavList[i];
          const pc = _.get(it, "link.page");

          if (pc && pc === page.page_code) {
            return true;
          }
        }
      }
    }
    return false;
  }

  const handleSelectElenode = (data) => {
    currentItemElCode.value = data?.code;
    hoverItemElCode.value = "";
  }

  const handleHoverElenode = (data) => {
    hoverItemElCode.value = _.isString(data) ? data : (data?.code || "");
  }

  const handleMouseLeaveElenode = () => {
    // mouseHover 有防抖处理，这里延迟执行
    setTimeout(() => {
      hoverItemElCode.value = "";
    }, 300)
  }

  const initDefConfig = async () => {
    if(!currentItem.value) return;

    if(!currentItem.value.setting) currentItem.value.setting = { sticky: false };
    if(currentItem.value._isDefLoaded) return;

    let pageType = currentPage.value?.type;
    let component = currentItem?.component;
    let itemDef = null;

    if(currentItem.value.is_dynccomp === 1) {
      // TODO 个性化组件加载
    } else {
      let ELE_TYPES = ELE_TYPES_Fn();

      if(pageType === 2) {   // h5
        ELE_TYPES = ELE_TYPES_Fn('H5');
      }

      itemDef = ELE_TYPES[ component ];
    }

    if(!itemDef) return;

    currentItem.value.data_schema = itemDef?.data_schema;
    currentItem.value.setting_schema = itemDef?.setting_schema;
    currentItem.value._isDefLoaded = true;
  }

  const initElemNodes = (autoExpandKeys = null) => {
    // console.log('-----------------> initElemNodes', _.map(items.value, 'page_item_code'));
    elemNodes.value = $pageUtils.getPageItemsNodeTree(items.value); // _getElesNodeTree(items.value);
  }

  const refreshEleNode = () => {
    /*if(!currentItem.value) {
      currentItemElCode.value = '';
      return;
    }

    let nodes = $pageUtils.getElNodeTree(currentItem.value.box_style, null, "box_style");
    let eles = $pageUtils.getElNodeTree(currentItem.value.ele_style, null, "ele_style");
    let code = _.get(eles, '[0].code') || _.get(nodes, '[0].code');

    nextTick(() => {
      if(code) {
        currentItemElCode.value = code;
      }
    })*/
  }

  const handleShowCompMarket = async () => {
    $WinComps({
      onConfirm: (comp) => {
        let def = _.cloneDeep(_.get(comp, 'comp_def', {}));
        def = _.defaultsDeep({
          component: _.get(comp, 'comp_name'),
          is_dynccomp: 1,
          comp_lib: _.get(comp, 'comp_lib'),
          icon: _.get(comp, 'icon'),
          name: _.get(comp, 'name'),
          project_id: this.projectId,
        }, def);

        handleMarketSelectCallback(def)
      }
    });
  }

  function handlePinPropChange(pp) {
    pinProp.value = pp;
  }

  function handlePinMenuChange(pm) {
    pinMenu.value = pm;
  }

  const handleDropDone = (info) => {
    let type = info?.type;
    let isRoot = _.get(info, "draggingNode.data.isRoot");

    // 组件的移动
    if(isRoot) {
      let dragItemCode = _.get(info, "draggingNode.data.item.page_item_code");
      let dropItemCode = _.get(info, "dropNode.data.item.page_item_code");

      let dragData = $utils.getTreeData(items.value, "page_item_code", dragItemCode, "subs"); // _.get(draggingNode, "data");
      let dropData = $utils.getTreeData(items.value, "page_item_code", dropItemCode, "subs"); // _.get(draggingNode, "data");
      let dragParentData = null;
      let dropParentData = null;

      if(dragData && dragData.parent_code) {
        dragParentData = $utils.getTreeData(items.value, "page_item_code", dragData.parent_code, "subs"); // _.get(draggingNode, "data");
      }

      if(dropData && dropData.parent_code) {
        dropParentData = $utils.getTreeData(items.value, "page_item_code", dropData.parent_code, "subs"); // _.get(draggingNode, "data");
      }

      let dragParentChildren = [];
      let dropParentChildren = [];

      if(dragParentData && dragParentData.subs) {
        dragParentChildren = dragParentData.subs;
      } else {
        dragParentChildren = items.value;
      }

      if(dropParentData && dropParentData.subs) {
        dropParentChildren = dropParentData.subs;
      } else {
        dropParentChildren = items.value;
      }

      let dragIdx = _.findIndex(dragParentChildren, { page_item_code: dragItemCode });
      let dropIdx = _.findIndex(dropParentChildren, { page_item_code: dropItemCode });

      // console.log(`---------------->>>>>> type: ${ type }`);
      // console.log(dropData, dragData);

      if(type === "after") {

        if(dropIdx < 0) return;

        dragParentChildren.splice(dragIdx, 1);
        dropParentChildren.splice(dropIdx + 1, 0, dragData);
        dragData.parent_code = _.get(dropParentData, "page_item_code");
      } else if(type === "before") {

        if(dropIdx < 0) return;

        dragParentChildren.splice(dragIdx, 1);
        dropParentChildren.splice(dropIdx, 0, dragData);
        dragData.parent_code = _.get(dropParentData, "page_item_code");
      } else if(type === "inner") {
        if(!dropData) return;

        dragParentChildren.splice(dragIdx, 1);
        if(!dropData.subs) dropData.subs = [];

        dragData.parent_code = _.get(dropData, 'page_item_code');
        dropData.subs.push(dragData);
      }

      // web
      if(pageType.value == 1 && dragParentChildren?.length) {
        let len = dragParentChildren.length;
        for(let i = 0; i < dragParentChildren.length; i++) {
          dragParentChildren[i].order = len -i;
          // console.log(len -i)
        }
      }

      initElemNodes();
    } else {    // 普通元素的移动
      let dragNode = _.get(info, "draggingNode");
      let dropNode = _.get(info, "dropNode");
      // let rootNode = this.getItemRootByNode(dragNode); // 原节点获取不到了
      let rootNode = getItemRootByNode(dropNode);
      let item = _.get(rootNode, "data.item");
      let origPropPath = _.get(dragNode, "data.propPath");
      let origPropName = _.get(dragNode, "data.propName");
      let origInfo = _.get(item, origPropPath);
      let origContainerPath = "";
      let origContainerInfo = null;

      let distPropPath = _.get(dropNode, "data.propPath");
      let distContainerPath = distPropPath;
      let distContainerInfo = _.get(item, distContainerPath);
      let distCompareName = "";

      let origIdx = origPropPath.lastIndexOf(".");
      if(origPropPath && origIdx >= 0) {
        origContainerPath = origPropPath.substring(0, origIdx);
        origContainerInfo = _.get(item, origContainerPath);
      }

      if(type === "after" || type === "before") {
        let idx = distPropPath.lastIndexOf(".");

        distContainerPath = distPropPath.substring(0, idx);
        distContainerInfo = _.get(item, distContainerPath);

        distCompareName = distPropPath.substr(idx + 1);

        if(!distCompareName) return;
      } else if(type === "inner") {

      }

      let newPropName = origPropName;

      // 命名冲突，新名字
      if(distContainerInfo[ origPropName ]) {
        newPropName = $utils.getNanoid(10);
      }

      if(distContainerInfo && origContainerInfo) {
        let distSort = _.get(distContainerInfo, "_sort");

        if(!distSort) { // 初始化
          distSort = [];

          // 未在 sorts 里的加入
          for(let prop in distContainerInfo) {
            if(!_.startsWith(prop, "_") && _.indexOf(distSort, prop) < 0) {
              distSort.push(prop);
            }
          }
        }

        // 增加到现有节点
        distContainerInfo[ newPropName ] = origInfo;

        if(distCompareName) {
          let idx = _.indexOf(distSort, distCompareName);

          if(idx >= 0 && _.indexOf(distSort, newPropName) < 0) {
            distSort.splice(idx, 0, newPropName);
          }
        } else if(_.indexOf(distSort, newPropName) < 0) {
          distSort.push(newPropName);
        }

        distContainerInfo._sort = distSort;

        // 删除原节点
        if(origContainerInfo) {
          origContainerInfo[ origPropName ] = null;
          delete origContainerInfo[ origPropName ];
        }

        /*if(!/^box_style/.test("box_style")) {   // box header 不 delete 不然会再次出现
            delete origContainerInfo[ origPropName ]; // box_style.header = null ?
        }*/

        let origSort = _.get(origContainerInfo, "_sort");

        if(!origSort) { // 初始化
          origSort = [];

          // 未在 sorts 里的加入
          for(let prop in origContainerInfo) {
            if(!_.startsWith(prop, "_") && _.indexOf(origSort, prop) < 0) {
              origSort.push(prop);
            }
          }
        }

        let idx = _.indexOf(origSort, origPropName);

        if(idx >= 0) {
          origSort.splice(idx, 1);
        }

        origContainerInfo._sort = origSort;
      }

      initElemNodes();
    }
  }

  /*const handleLowcodeChange = (low) => {
    lowcode.value = low;
  }*/

  const handleMenuClick = (ele) => {
    let comp_lib = _.get(ele, "comp_lib");
    let comp_def = _.get(ele, "comp_def");
    let def = ele;

    // is_dynccomp
    if(comp_lib && comp_def) {
      def = _.cloneDeep(comp_def || {});
      def = _.defaultsDeep({
        component: _.get(ele, 'comp_name'),
        // is_dynccomp: 1,
        comp_lib: _.get(ele, 'comp_lib'),
        icon: _.get(ele, 'icon'),
        name: _.get(ele, 'name'),
        project_id: projectId.value,
      }, def);
    }

    let newEle = _dragClone(def, items.value);
    let lastItem = null;
    let x = 0, y = 0, w = 4, h = 8, order = items.value.length;
    let ox = 0, oy = 0;

    newEle.alias = _getAlias(newEle.code);

    _.each(items.value, it => {
      if(!it) return;

      if(it.y > oy || (it.y === oy && it.x >= ox)) {
        lastItem = it;
      }
    });

    if(lastItem) {
      x = lastItem.x + lastItem.w;
      y = lastItem.y;

      if(x > 12 - w) {
        x = 0;
        y++;
      }
    }

    newEle.x = x;
    newEle.y = y;
    newEle.w = w;
    newEle.h = h;
    newEle.order = order;

    if(ele.micro) newEle.box_style = null;

    items.value.push(newEle);
    initElemNodes();   // 不能自动触发，手动更新，未找到原因
    handleSelectItem({
      items: items.value,
      item: newEle,
      isSelectItem: true
    });
    // if(nit) delete nit.name;
    // this.appendItemAfter(nit, this.currentItem);
  }

  const handleShowCloudCompWin = () => {
    compPanelShow.value = true;
  }

  const handlePageResize = () => {
    nextTick(() => {
      /*let $el = _.get(this.$refs, "appViewBody.$el");
      if($el && $el.offsetWidth) {
        pageWidth.value = $el.offsetWidth;
      }*/
    });
  }

  const handleClickDesignBody = () => {
    $bus.emit('design:clickBody')
  }

  const handleCustomBtnClick = (event, action, data = null, index = 0) => {
    $jutils.Page.btnTrigger(event, action, instance, data, index)
  }

  const handleCustomBtnDblClick = (event, action, data = null, index = 0) => {
    $jutils.Page.btnTrigger(event, action, instance, data, index)
  }

  // ========== Return Public API ==========
  return {
    dataset,
    // State
    projectId,
    designPageId,
    iAppId,
    loading,
    ready,

    currentItem,
    currentIndex,
    currentItemElCode,
    hoverItemElCode,
    pageAddShow,
    pageForm,
    activePageIndex,
    items,
    pages,
    currentPage,
    showMainNav,
    commonPage,
    navItem,
    isEditNav,
    isMainNavPage,
    elemNodes,
    maskPos,
    isRouterEnter,
    isH5,
    pageType,
    className,
    currentItems,
    currentNode,

    hoverItemCode,
    pinMenu,
    pinProp,
    // lowcode,
    compPanelName,
    compPanelShow,
    // pageWidth,
    _r,

    // Computed
    loginUser,
    project,
    dyncComps,
    isShowTitleProp,
    isCurrentFirst,
    isCurrentLast,
    isEditPage,
    pageTheme,
    pageStyle,
    actions,
    actionsTop,
    actionsBottom,

    // Methods
    init,
    reset,
    // refresh,
    handleSelectItem,
    getIndex,
    moveUp,
    moveDown,
    copy,
    handleItemEnter,
    handleItemLeave,
    handleSelectElenode,
    handleHoverElenode,
    handleMouseLeaveElenode,
    handleMenuClick,
    handleItemStateChange,
    initElemNodes,
    refreshEleNode,
    // updateMask,
    // handleMarketSelectCallback,
    // handleLowcodeChange,
    handlePinPropChange,
    handlePinMenuChange,
    handleDropDone,
    submit,

    handleClickDesignBody,
    handleCustomBtnClick,
    handleCustomBtnDblClick,
  };
}

export const useBuilderProps = {
  inPageId: {
    type: [Number, String],
    default: null
  },
  pageId: {
    type: [Number, String],
    default: null
  },
  appId: {
    type: [ Number, String ],
    default: null
  },
  /*isH5: {
    type: Boolean,
    default: true
  },*/
  inPageType: {
    type: [ Number, String ],
    default: 2
  }
}
